<!DOCTYPE html>
<html>
    <head>
        <title>Slides of elements</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery-1.9.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var speed = 1200;
                $("#slideUp").click(function() {
                    $("#firstDiv").slideUp(speed, function(){
                        checkState();
                        buttonState();
                    })
                });
                $("#slideDown").click(function() {
                    $("#firstDiv").slideDown(speed, function() {
                        checkState();
                        buttonState();

                    })
                });
                $("#slideToggle").click(function() {
                    $("#secondDiv").slideToggle(speed, function() {
                        checkState();

                    });
                });

                var checkState = function() {

                    var visible = $("div#firstDiv").is(":visible");
                    var visible2 = $("div#secondDiv").is(":visible");
                    $("#state").fadeOut(300, function() {
                        $("#state").html("State of first div : " + visible + "<br>State of second div : " + visible2);
                        $("#state").fadeIn(500);
                    });
                }

                var buttonState = function() {
                    var visible = $("div#firstDiv").is(":visible");
                    if(visible) {
                        $("#slideDown").attr('disabled', 'disabled');
                        $("#slideUp").removeAttr('disabled');
                    } else {
                        $("#slideUp").attr('disabled', 'disabled');
                        $("#slideDown").removeAttr('disabled');

                    }
                }

                buttonState();
                checkState();

            })
        </script>
    </head>
    <body>
        <h4>
            <a href="index.html">Index</a>
        </h4>
        <input id="slideUp" type="button" value="Slide Up" />
        <input id="slideDown" type="button" value="Slide Down" />
        <input id="slideToggle" type="button" value="Slide Toggle" />
        <div id="state" style="color: steelblue; position: absolute; left: 370px; top: 10px"></div>
        <div id="firstDiv" style="position: absolute; left: 100px; top: 100px ; width: 399px; padding: 20px;background-color: lime; border-width: 1px; border-color: black; border-style: solid" >

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas enim enim, condimentum vel tristique id, feugiat vitae ipsum. Praesent ultrices fermentum quam, sit amet pellentesque leo semper ut. Pellentesque ipsum orci, ornare quis tempus sit amet, scelerisque in mi. Integer pulvinar semper pharetra. Vivamus sodales tristique felis, sit amet tristique erat tempor et. Vivamus dictum hendrerit placerat. Ut a sollicitudin elit.

            Sed ut purus ligula, et ultricies elit. Aliquam in mauris neque, et adipiscing quam. Phasellus porta sem sed lacus faucibus porttitor non et nisi. Duis lacinia vestibulum lacus, at tristique risus egestas sed. Aliquam euismod commodo ornare. Duis laoreet sagittis urna, sed convallis neque commodo ac. Duis tincidunt nibh eros. Integer lobortis vulputate ligula vel porttitor.

        </div>
        <div id="secondDiv" style="position: absolute; left: 580px; top: 100px ; width: 399px; padding: 20px;background-color: appworkspace; border-width: 1px; border-color: black; border-style: solid" >

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas enim enim, condimentum vel tristique id, feugiat vitae ipsum. Praesent ultrices fermentum quam, sit amet pellentesque leo semper ut. Pellentesque ipsum orci, ornare quis tempus sit amet, scelerisque in mi. Integer pulvinar semper pharetra. Vivamus sodales tristique felis, sit amet tristique erat tempor et. Vivamus dictum hendrerit placerat. Ut a sollicitudin elit.

            Sed ut purus ligula, et ultricies elit. Aliquam in mauris neque, et adipiscing quam. Phasellus porta sem sed lacus faucibus porttitor non et nisi. Duis lacinia vestibulum lacus, at tristique risus egestas sed. Aliquam euismod commodo ornare. Duis laoreet sagittis urna, sed convallis neque commodo ac. Duis tincidunt nibh eros. Integer lobortis vulputate ligula vel porttitor.

        </div>
    </body>
</html>
